<template>
  <div class="category-body">
    <div class="category-list">
      <CategoryWeb
          v-for="item in categoryList"
          :key="item.id"
          :data="item"
          class="category-item"
      />
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import axios from 'axios';

const categoryList = ref([]);
const jwtToken = localStorage.getItem('jwtToken');

// 创建一个Axios实例，设置默认请求头
const axiosInstance = axios.create({
  headers: {
    Token: jwtToken, // 将 JWT 令牌放入请求头的 Token 字段
  },
});

axiosInstance
    .get('http://localhost:8080/show')
    .then((response) => {
      const responseData = response.data;
      if (Array.isArray(responseData.data) && responseData.data.length > 0) {
        categoryList.value = responseData.data; // 赋值分类
      }
    })
    .catch((error) => {
      console.error('请求失败:', error);
    });
</script>

<style lang="scss">
.category-body {
  background: linear-gradient(to bottom, #f7f8fa, #fff);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

  .category-list {
    display: flex;
    flex-wrap: wrap; /* 自动换行布局 */
    gap: 15px; /* 间距 */
  }

  .category-item {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 15px;
    cursor: pointer;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    }
  }
}
</style>
